/* 图片选择器 */
<template>
  <div class="imagepickerfield-config">
    <je-form-item label="允许上传类型" name="allow">
      <je-select
        v-model:value="formState.allow"
        :options="options"
        mode="multiple"
        placeholder="请选择"
        allow-clear
      ></je-select>
    </je-form-item>

    <je-form-item label="允许上传数量" name="fileNum">
      <je-input-number v-model:value="formState.fileNum" style="width: 100%" :min="1" />
    </je-form-item>

    <je-form-item label="上传文件大小" name="fileSize">
      <je-input-number
        v-model:value="formState.fileSize"
        addon-after="M"
        :min="0"
        style="width: 100%"
      />
    </je-form-item>
    <je-form-item label="列表展示图片" name="listShowImg">
      <span class="prompt" @click="handleJs">点击示例查看</span>
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref, h } from 'vue';
  import { Form, InputNumber, Select, Modal, EditorCode } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'ImagepickerfieldConfig',
    components: {
      JeFormItem: Form.Item,
      JeInputNumber: InputNumber,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const defaultValue =
        "// 示例适用于表单字段的类型是图片选择器,列表想要展示图片。    \n// 方法：将下面代码复制到对应列表字段配置事件编辑renderer中。 \nconst {\n    $func, // 功能对象\n    $grid, // 功能列表对象\n    column, // 列\n    row, // 行\n} = EventOptions;\nconst columnCode = column.field;    // 列编码\nconst columnValue = row[columnCode];// 列值 \n// 处理渲染内容\nconst { h } = JE.useVue();\nconst { getFileUrlByKey, decode } = JE.useUtils();\n// 图片内容\nconst files = columnValue ? decode(columnValue) : [];\nconst renderContent = [];\nfiles.map(item=>{\n    renderContent.push(h('img',{src: getFileUrlByKey(item.fileKey),style: {width: '40px',height: '20px'}}))\n})\nreturn h('div', {}, renderContent);";
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        allow: config.allow || [], //允许上传类型
        fileNum: config.fileNum || '', //允许上传数量
        fileSize: config.fileSize || '', //上传文件大小
        listShowImg: config.listShowImg || defaultValue, // 列表展示图片
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //下拉框的数据
      const options = ref([
        { value: 'jpg', label: 'jpg' },
        { value: 'png', label: 'png' },
        { value: 'gif', label: 'gif' },
        { value: 'bmp', label: 'bmp' },
        { value: 'ico', label: 'ico' },
        { value: 'jpeg', label: 'jpeg' },
      ]);

      const handleJs = () => {
        Modal.window({
          title: '示例查看',
          headerStyle: 'height:50px;',
          bodyStyle: 'padding:0 20px 20px;',
          content: () =>
            h(EditorCode, {
              value: formState.listShowImg,
              height: '100%',
              readonly: true,
              hideApi: true,
            }),
        });
      };
      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState, options, handleJs };
    },
  });
</script>
<style lang="less" scoped>
  .imagepickerfield-config {
    .prompt {
      margin: 0 !important;
      font-size: 14px;
      color: #3265f5;
      vertical-align: top;
      font-style: italic;
      cursor: pointer;
    }
  }
</style>
